@extends('admin.layout')

@section('title', '编辑文章')

@section('body')
    <div class="layui-fluid">
        <div class="layui-row layui-col-space15">
            <div class="layui-col-md12">
                <div class="layui-card">
                    <div class="layui-card-header">编辑文章</div>
                    <div class="layui-card-body layui-row">
                        <form class="layui-form layui-col-lg9" lay-filter="myform">
                            <div class="layui-form-item">
                                <div class="layui-inline">
                                    <label class="layui-form-label">文章ID</label>
                                    <div class="layui-input-inline">
                                        <input type="text" name="id" value="{{ $id }}" readonly class="layui-input layui-disabled">
                                    </div>
                                </div>
                            </div>
                            <div class="layui-form-item">
                                <label class="layui-form-label">文章标题</label>
                                <div class="layui-input-block">
                                    <input type="text" name="title" value="{{ $title }}" required lay-verify="required" placeholder="请输入标题"
                                           autocomplete="off" class="layui-input">
                                </div>
                            </div>
                            <div class="layui-form-item">
                                <div class="layui-inline">
                                    <label class="layui-form-label">文章分类</label>
                                    <div class="layui-input-inline">
                                        <select name="category_id" lay-verify="required">
                                            <option value="">请选择分类</option>
                                            @foreach ($cate as $v)
                                                <option value="{{ $v['id'] }}"
                                                        @if ($v['id'] == $category_id) selected="selected" @endif>{{ $v['name'] }}</option>
                                            @endforeach
                                        </select>
                                    </div>
                                </div>
                            </div>
                            <div class="layui-form-item">
                                <label class="layui-form-label">标签</label>
                                <div class="layui-input-block">
                                    <input type="text" name="tags" value="{{ $tags }}" placeholder="多个标签用英文逗号分隔" autocomplete="off"
                                           class="layui-input">
                                </div>
                            </div>
                            <div class="layui-form-item">
                                <label class="layui-form-label">文章详情</label>
                                <div class="layui-input-block">
                                    <textarea name="content" id="content" class="layui-textarea">{{ $content }}</textarea>
                                </div>
                            </div>
                            <div class="layui-form-item">
                                <label class="layui-form-label"></label>
                                <div class="layui-input-block">
                                    <button type="button" class="layui-btn layui-btn-warm " id="content-to-excerpt">&#8681 同步到摘要</button>
                                </div>
                            </div>
                            <div class="layui-form-item">
                                <label class="layui-form-label">文章摘要</label>
                                <div class="layui-input-block">
                                    <textarea name="excerpt" id="excerpt" class="layui-textarea">{{ $excerpt }}</textarea>
                                </div>
                            </div>
                            <div class="layui-form-item">
                                <div class="layui-inline">
                                    <label class="layui-form-label">评论开关</label>
                                    <div class="layui-input-inline">
                                        <input type="checkbox" value="1" @if ($show_comment) checked @endif name="show_comment"
                                               lay-skin="switch" lay-text="开|关">
                                    </div>
                                </div>
                            </div>
                            <div class="layui-form-item">
                                <div class="layui-inline">
                                    <label class="layui-form-label">是否原创</label>
                                    <div class="layui-input-inline">
                                        <input type="checkbox" value="1" @if ($is_original) checked @endif name="is_original"
                                               lay-skin="switch" lay-text="是|否">
                                    </div>
                                </div>
                            </div>
                            <div class="layui-form-item">
                                <label class="layui-form-label">状态</label>
                                <div class="layui-input-block">
                                    <input type="radio" name="status" value="0" title="草稿箱" @if ($status == 0) checked="checked" @endif>
                                    <input type="radio" name="status" value="1" title="已发布" @if ($status == 1) checked="checked" @endif>
                                    <input type="radio" name="status" value="2" title="回收站" @if ($status == 2) checked="checked" @endif>
                                </div>
                            </div>
                            <div class="layui-form-item">
                                <label class="layui-form-label">关联文章ID</label>
                                <div class="layui-input-block">
                                    <input type="text" name="related_ids" value="{{ $related_ids }}" placeholder="多个ID用英文逗号分隔"
                                           autocomplete="off" class="layui-input">
                                </div>
                            </div>
                            <div class="layui-form-item">
                                <div class="layui-input-block">
                                    <button type="submit" class="layui-btn" lay-submit="">提交</button>
                                    <button type="reset" id="reset-btn" class="layui-btn layui-btn-primary">重置</button>
                                    <a href="{{ $url }}" target="_blank" class="layui-btn layui-btn-normal">前台浏览</a>
                                </div>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <script src="/static/ckeditor/ckeditor.js"></script>
    <script>
        layui.use(['layer', 'form'], function () {
            var $ = layui.$;
            var layer = layui.layer;
            var form = layui.form;

            //进入页面初始化时的数据
            var oldData = {};

            CKEDITOR.replace('content', {height: 750});
            CKEDITOR.replace('excerpt', {height: 450});

            CKEDITOR.on('instanceReady', function (evt) {
                oldData = getFormData();
                evt.editor.on('maximize', function (evt2) {
                    if (typeof parent.onEditorMaximize == 'function') {
                        parent.onEditorMaximize(evt2.data);
                    }
                });
            });

            $('#content-to-excerpt').click(function () {
                CKEDITOR.instances['excerpt'].setData(CKEDITOR.instances['content'].getData());
            });

            //点击重置按钮时手动还原编辑器内容
            $('#reset-btn').click(function () {
                CKEDITOR.instances['content'].setData(oldData.content);
                CKEDITOR.instances['excerpt'].setData(oldData.excerpt);
            });

            form.on('submit', function (obj) {
                obj.field.content = CKEDITOR.instances['content'].getData();
                obj.field.excerpt = CKEDITOR.instances['excerpt'].getData();

                if (obj.field.content === '') {
                    layer.msg('请输入文章内容', {icon: 5});
                    return false;
                }

                $.post('/admin/article/edit', obj.field, function (res) {
                    if (res.code === 0) {
                        CKEDITOR.instances['excerpt'].setData(res.data.excerpt, {
                            callback: function () {
                                oldData = getFormData();
                            }
                        });
                        layer.msg(res.msg, {
                            icon: 1,
                            time: 2000
                        }, function () {
                            //location.reload();
                        });
                    } else {
                        layer.msg(res.msg, {icon: 5});
                    }
                }, 'json');

                return false;
            });

            //获取表单所有内容
            function getFormData() {
                var formData = form.val('myform');
                formData.content = CKEDITOR.instances['content'].getData();
                formData.excerpt = CKEDITOR.instances['excerpt'].getData();
                return formData;
            }

            //离开页面前，如果内容有变更则提示
            window.onbeforeunload = function () {
                var newData = getFormData();
                var changeFlag = 0;

                for (var key in newData) {
                    if (oldData[key] != newData[key]) {
                        changeFlag = 1;
                        break;
                    }
                }

                if (changeFlag) {
                    return '表单有变更但尚未保存';
                }
            };
        });
    </script>
@endsection
